.sp-input-number{

    position:relative;
    padding: 20px 5px;
    box-sizing: border-box;

    &.error{

        margin-bottom:26px;
        
        &::before{
            height: 2px;
            background: $danger-color;
        }
        &:after{
            border-bottom: 2px solid $danger-color;
        }
        .tips{
            color:$danger-color;
            position: absolute;
            bottom: -50px;
            font-size: 28px;
            font-weight: 400;
        }
    }
 
    &::before{
        display: block;
        content: '';
        height: 1px;
        background: #C5CAD5;
        position:absolute;
        bottom: 0;
        left:0;
        right: 0;
    }   

    &:after{
        left: 0;
        right: 0;
        bottom: 0;
        content: "";
        position: absolute;
        transform: scaleX(0);
        transition: transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
        border-bottom: 2px solid #111A34;
        pointer-events: none; 
    }

    .clear{

        position: absolute;
        right:0;
        top:0;
        bottom:0;
        width:50px;
        @include flexbox;

        .iconfont{
            color:#C5CAD5;
            font-size: 36px; 
        }
        

    }

    &.active{
        &:after{
            transform: scaleX(1);
        }

       
    }

    .custominput{
        font-size: 50px;
        color:#111A34;
    }

    .placeholder{
        font-size:50px;
        color:#CCCCCC;
        position: absolute;
        top: 18px;
        pointer-events: none;
    } 

   
}